
<template>
  <div style="padding:0 20px;">
    <div v-if="!isView">
      <el-button  type="primary" @click="openSKU">关联ERP系统SKU</el-button>
      <el-button  type="danger" @click="deleteSel" >删除所选</el-button>
    </div>
    <vxe-table
        ref="tableRef"
        border
        style="margin-top: 10px;"
        align="center"
        :data="tableList"
        height="445px"
        :checkbox-config="{ trigger:'row'}"
        :row-config="{isCurrent: true, isHover: true}"
    >
      <vxe-column type="checkbox"  width="80" ></vxe-column>
      <vxe-column type="seq" width="80" title="序号"  ></vxe-column>
      <vxe-column field="erpShopId" title="店铺ID"></vxe-column>
      <vxe-column field="erpSkuId" title="sku编码"></vxe-column>
      <vxe-column field="erpSkuName" title="商品名称"></vxe-column>
      <vxe-column field="link" width="200" title="渠道">
        <template #default="{row}">
          <template v-for="(item,index) in row.links" :key="index">
            <div>
              <el-link type="primary" :href="item" target="_blank">渠道{{index+1}}</el-link>
            </div>
          </template>
        </template>
      </vxe-column>
      <vxe-column fixed="right" title="操作" v-if="!isView">
        <template #default="{row}">
          <el-button type="text" style="color:red" @click="handleDelete(row)">删除</el-button>
        </template>
      </vxe-column>
    </vxe-table>
    <div class="dFooter">
        <span class="dialog-footer">
          <el-button type="primary" v-if="!isView" @click="clickSave"> 提交 </el-button>
          <el-button @click="handleClose">关闭</el-button>
        </span>
    </div>
    <SelSysSKU v-if="isShowSKU" :isShowSKU="isShowSKU" @cancelSKU="cancelSKU"></SelSysSKU>
  </div>
</template>

<script setup>
import SelSysSKU from "@/views/commodity/commodityManagement/component/selSysSKU.vue";
import {getCurrentInstance, onMounted} from "vue";

const { proxy } = getCurrentInstance()
const props = defineProps({
  detailData: {type: Object},
  isView:{type:Boolean}
})
let tableList=ref([])
let isShowSKU=ref(false)
onMounted(()=>{
  if(JSON.stringify(props.detailData) !='{}'){
    tableList.value =props.detailData.skuDetails.map(item=>{
      if(item.link){
        item.links =item.link.split(',')
      }
      return item
    })
  }
})
function openSKU(){
  isShowSKU.value=true
}
function cancelSKU(data){
  isShowSKU.value=false
  if(data && data.length>0){
     data =data.map(item=>{
       item.keyId=item.erpShopId+item.erpSkuId //唯一值
       return item
     })
    let newData=[...tableList.value,...data]
    //过滤数组重复数据
    let filtered = newData.filter((obj, index, self) => {
      return self.findIndex(item => item.keyId === obj.keyId) === index;
    });
    tableList.value =filtered

  }
}

const emits = defineEmits(['cancel', 'clickSave'])

function handleClose() {
  emits('cancel')
}

function clickSave(){
  // if(tableList.value.length>0){
  //   emits('clickSave',tableList.value)
  // }else {
  //   proxy.$modal.msgWarning("请先关联SKU!")
  // }
  emits('clickSave',tableList.value)
}

function getData(){
  return tableList.value
}

//单个删除
function handleDelete(row) {
  tableList.value = tableList.value.filter(item => item.keyId != row.keyId)
}

//删除所选
function deleteSel() {
  let selRows = proxy.$refs.tableRef.getCheckboxRecords()
  let a = tableList.value
  let filtered = a.filter(obj => !selRows.some(bObj => bObj.keyId === obj.keyId));
  tableList.value = filtered
}

defineExpose({
  getData
})

</script>

<style scoped lang="scss">
.dFooter {
  margin-top: 20px;
  width: 100%;
  display: flex;
  justify-content: right;
}
</style>